<template>
  <el-dialog
    :title="title"
    width="650px"
    :visible.sync="openSheet"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-transfer
      v-model="assignedUsers"
      filterable
      :filter-placeholder="$t('inputUserName')"
      :titles="[sourceTitle, targetTitle]"
      :data="allUsers"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{
        $t('update')
      }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { departmentAssignUserApi, updatedepartmentAssignUserApi } from '@/views/master/departments/api/departments.api';
export default {
  data() {
    return {
      title: this.$t('assignUserBtn'),
      sourceTitle: this.$t('userList'),
      targetTitle: '',
      openSheet: false,
      departentCode: undefined,
      params: {
        department: undefined
      },
      allUsers: [],
      assignedUsers: [],
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      }
    };
  },
  methods: {
    openSheetDialog(data) {
      this.openSheet = !this.openSheet;
      this.params.department = data.id;
      this.departentCode = data.code
      this.targetTitle = this.$t('departmentCode') + '(' + this.departentCode + ')'
      this.getRoleAssignUsers();
    },
    cancel() {
      this.openSheet = !this.openSheet;
    },
    async getRoleAssignUsers() {
      var resp = await departmentAssignUserApi(this.params);
      if (resp.success) {
        const { un_assigned, assigned } = resp.data;
        this.assignedUsers = assigned
        this.allUsers = un_assigned;
      } else {
        this.targaMessageBox(this.title, resp.msg);
      }
    },
    async submitForm() {
      var data = { 'department': this.params.department, 'user': this.assignedUsers }
      var resp = await updatedepartmentAssignUserApi(data)
      if (resp.success) {
        this.targaMessage(
          this.$t('updateSuccess', {
            title: this.$t('role'),
            value: this.departentCode
          })
        );
      } else {
        this.targaMessageBox(this.title, resp.msg);
      }
    }
  }
};
</script>

  <style></style>
